<template>
  <van-row>
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="$emit('close')"
    />
    <van-form @submit="doSubmit">
      <van-field
        v-model="submitForm.moldName"
        name="模具名称"
        label="模具名称"
        placeholder="(必填)模具名称"
        :rules="[{ required: true, message: '请填写模具名称' }]"
        input-align="left"
      />
      <van-field
        v-model="submitForm.categoryName"
        readonly
        clickable
        name="picker"
        label="分类"
        placeholder="点击选择分类"
        input-align="left"
        :rules="[{ required: true, message: '请选择分类' }]"
        @click="showCategoryPicker = true"
      />
      <van-field
        v-model="submitForm.unit"
        readonly
        clickable
        name="picker"
        label="单位"
        placeholder="点击选择单位"
        input-align="left"
        :rules="[{ required: true, message: '请选择单位' }]"
        @click="showUnitPicker = true"
      />
      <van-field
        readonly
        clickable
        name="supplierName"
        :value="submitForm.supplierName"
        label="制造商"
        placeholder="点击选择制造商"
        input-align="left"
        @click="showSupplier=true"
      />
      <van-field
        readonly
        clickable
        name="madeDate"
        :value="submitForm.madeDate"
        label="开模日期"
        placeholder="点击选择日期"
        input-align="left"
        @click="showDatePicker = true"
      />
      <van-field
        v-model="submitForm.position"
        name="位置"
        label="位置"
        placeholder="(非必填)位置"
        input-align="left"
      />
      <van-field
        v-model="submitForm.capacity"
        name="产能"
        label="产能"
        placeholder="(非必填)产能 一模2双则填2"
        type="digit"
        input-align="left"
      />
      <van-field
        v-model="submitForm.weight"
        name="重量"
        label="重量"
        placeholder="(非必填)请输入鞋底重量"
        type="digit"
        input-align="left"
      />
      <van-field
        v-model="submitForm.remark"
        rows="2"
        autosize
        label="备注"
        type="textarea"
        maxlength="100"
        show-word-limit
        placeholder="(非必填)备注"
        input-align="left"
      />
      <div style="margin: 16px;">
        <van-button round block type="danger" native-type="submit">提交</van-button>
      </div>
    </van-form>
    <van-popup v-model="showCategoryPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="categoryData"
        @confirm="onCategoryConfirm"
        @cancel="showCategoryPicker = false"
      />
    </van-popup>
    <van-popup v-model="showUnitPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="unitData"
        @confirm="onUnitConfirm"
        @cancel="showUnitPicker = false"
      />
    </van-popup>
    <div v-if="showSupplier">
      <select-supplier ref="selectSupplier" :visible="showSupplier" @close="handleCloseSupplier" />
    </div>
    <van-calendar v-model="showDatePicker" :min-date="minDate" :show-confirm="false" @confirm="onConfirmDate" />
  </van-row>
</template>

<script>
import { updateMoldById, selectMoldById, saveMold } from '@/api/mold'
import { selectCategoryTree } from '@/api/category'
import { selectByDictKey } from '@/api/dict'
import SelectSupplier from '@/components/modules/selectSupplier.vue'
import moment from 'moment'
import Moment from 'moment/moment'

export default {
  name: 'MoldSubmitModule',
  components: { SelectSupplier },
  data() {
    return {
      showDatePicker: false,
      showCategoryPicker: false,
      showUnitPicker: false,
      showSupplier: false,
      categoryData: [],
      unitData: [],
      title: '',
      submitForm: {},
      minDate: moment(new Date()).subtract(30, 'years').toDate()
    }
  },
  methods: {
    init(id) {
      this.resetForm()
      this.getUnit()
      this.getCategoryData()
      this.title = '修改模具'
      if (!id) {
        this.title = '新增模具'
        return
      }
      selectMoldById(id).then(resp => {
        if (resp.success) {
          this.submitForm = resp.data
        }
      })
    },
    resetForm() {
      this.submitForm = {
        id: '',
        moldName: '',
        categoryName: '',
        unit: '',
        supplierName: '',
        madeDate: '',
        position: '',
        capacity: '',
        weight: '',
        remark: ''
      }
    },
    doSubmit() {
      let request = saveMold
      if (this.submitForm.id) {
        request = updateMoldById
      }
      request(this.submitForm).then(resp => {
        if (resp.success) {
          this.$toast.success('操作成功')
          this.submitForm = {}
          this.$emit('close')
        }
      })
    },
    getCategoryData() {
      selectCategoryTree({}).then(resp => {
        if (resp.success) {
          this.categoryData = resp.data
        }
      })
    },
    getUnit() {
      selectByDictKey('prod_unit').then(resp => {
        if (resp.success) {
          this.unitData = resp.data
        }
      })
    },
    onCategoryConfirm(row) {
      this.submitForm.categoryId = row.id
      this.submitForm.categoryName = row.categoryName
      this.showCategoryPicker = false
    },
    onUnitConfirm(row) {
      this.submitForm.unit = row.itemName
      this.showUnitPicker = false
    },
    handleCloseSupplier(row) {
      this.showSupplier = false
      if (row) {
        this.submitForm.supplierId = row.id
        this.submitForm.supplierName = row.supplierName
      }
    },
    onConfirmDate(row) {
      this.submitForm.madeDate = Moment(row).format('YYYY-MM-DD')
      this.showDatePicker = false
    }
  }
}
</script>

<style scoped>

</style>
